﻿@using TianYu.CMS.Domain.ViewModel
@model List<SysMenuViewModel>
<style>
    .layui-colla-title { height: auto }
    .layui-colla-title label.nlbl { width: auto }
    .layui-btn-group + .layui-btn-group { margin-left: auto; }
    .layui-btn-group { margin-right: 8px; }
</style>
<fieldset class="layui-elem-field">
    <legend>搜索</legend>
    <div class="layui-field-box">
        <div class="layui-inline">
            <input class="layui-input" name="KeyWords" autocomplete="off" layui-type="search" placeholder="角色名称">
        </div>
        <button class="layui-btn" data-type="search" id="btnSearch">搜索</button>
    </div>
</fieldset>
<script type="text/html" id="toolbarList">
    <div class="layui-btn-container">
        @Html.Raw(ViewBag.ButtonHtml)
    </div>
</script>
<div class="layui-row">
    <div class="layui-col-xs4">
        <table class="layui-hide" lay-filter="tblList" id="tblList"></table>
    </div>
    <div class="layui-col-xs8">
        <div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1" lay-id="tblList2" style=" ">
            <div class="layui-table-tool">
                <div class="layui-table-tool-temp">
                    <div class="layui-btn-container">
                        @Html.Raw(ViewBag.ButtonHtml2)
                    </div>
                </div>
            </div>
            <div class="layui-table-box">
                <div class="layui-table-header">
                    <table class="layui-table" cellspacing="0" cellpadding="0" border="0">
                        <thead>
                            <tr>
                                <th data-field="0" data-unresize="true" class="layui-table-col-special">
                                    <div class="layui-table-cell laytable-cell-checkbox" style="width:80px;">
                                        <input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose">
                                        <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
                                    </div>
                                </th>
                                <th data-field="Name" style="width:100px">
                                    <div class="layui-table-cell"><span>菜单名称</span></div>
                                </th>
                                <th data-field="Name" style="min-width:300px">
                                    <div class="layui-table-cell"><span>操作按钮</span></div>
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="layui-table-body layui-table-main" id="menu-list">                     
                    @foreach (var item in Model.Where(a => a.ParentId == -1))
                    {
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">
                                <i class="layui-icon layui-icon-down"></i>
                                <input type="checkbox" value="@item.Id" id="cbo_@item.MenuCode" data-code="@item.MenuCode" lay-skin="primary" lay-filter="AllChoose" />
                                <label class="auto" onclick="onOpen(this,@item.Id)" id="lbl@(item.Id)">@item.MenuName</label>
                            </h2>
                            <div class="layui-colla-content layui-show" id="nodeContent@(item.Id)">
                                <div class="layui-collapse">
                                    @foreach (var nodeMenu in Model.Where(a => a.ParentId == item.Id))
                                    {
                                        <div class="layui-colla-item">
                                            <div class="layui-colla-title layui-row">
                                                <div class="layui-col-xs3">
                                                    <input type="checkbox" value="@nodeMenu.Id" id="cbo_@nodeMenu.MenuCode" data-code="@nodeMenu.MenuCode" lay-skin="primary" lay-filter="AllChoose"/>
                                                    <label class="nlbl">@nodeMenu.MenuName</label>
                                                </div>
                                                <div class="layui-col-xs9">
                                                    @foreach (var btn in Model.Where(a => a.MenuType == 4 && a.ParentId==nodeMenu.Id))
                                                    {
                                                        <div class="layui-btn-group">
                                                            <input type="checkbox" title="@btn.MenuName" value="@btn.Id" id="cbo_@nodeMenu.MenuCode" data-code="@nodeMenu.MenuCode" lay-filter="AllBtnChoose"/>
                                                        </div>
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                     }
                                </div>
                            </div>
                        </div>
                     }
                </div>
            </div>
        </div>
    </div>
</div>
@section Scripts{
    <script type="text/javascript">
        var pageIndex = 1, curRoleId = 0;
        $(function () {
            layui.use(['table', 'form'], function () {
                var $ = layui.$, table = layui.table, form = layui.form;
                var tblList = table.render({
                    elem: '#tblList'
                    , url: '/admin/sysrole/getlist' + getSearchKeys()
                    , toolbar: '#toolbarList'
                    , defaultToolbar: ['filter', 'print']//['filter', 'print', 'exports']
                    , cellMinWidth: 150
                    , page: {
                        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']  //自定义分页布局
                        , curr: 1                                                   //当前页码
                        , groups: 3                                                 //显示页码数
                        , first: false                                              //不显示首页
                        , last: false                                               //不显示尾页
                    }
                    , cols: [[
                        { type: 'checkbox' },
                        { field: 'roleName', title: '角色名称' }
                    ]]
                });
                //监听点击行事件
                table.on('row(tblList)', function (obj) {
                    var data = obj.data;
                    curRoleId = data.id;
                    //标注选中样式
                    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                    $("input[name='layTableCheckbox']").prop("checked", false);
                    $(".layui-table-body .layui-form-checkbox").removeClass("layui-form-checked");
                    obj.tr.find("input[name='layTableCheckbox']").prop("checked", true).siblings(".layui-form-checkbox").addClass("layui-form-checked");
                    $(".layui-collapse .layui-form-checkbox").removeClass("layui-form-checked");
                    $("input[name='mcbox'],input[name='bcbox']").prop("checked", false);
                    $.post("/admin/sysrole/getrolepower", { id: curRoleId }, function (res) {
                        $("#menu-list input[type='checkbox']").prop("checked", false).siblings(".layui-form-checkbox").removeClass("layui-form-checked");
                        $(res.data).each(function (i, item) { 
                            $("input[type='checkbox'][value='" + item.menuId + "']").prop("checked", true).siblings(".layui-form-checkbox").addClass("layui-form-checked");
                        });
                    })
                });
                //头工具栏事件
                table.on('toolbar(tblList)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    var data = checkStatus.data;
                    switch (obj.event) {
                        case 'add':
                            win.open("/admin/sysrole/addedit", 450, 350, "新增");
                            break;
                        case 'edit':
                            if (data != "") {
                                win.open("/admin/sysrole/addedit?id=" + data[0].id, 450, 350, "编辑");
                            } else {
                                win.info("请选择要编辑的角色");
                            }
                            break;
                        case 'del':
                            if (data != "") {
                                var id = "";
                                $(data).each(function (i, item) {
                                    id += item.id + ",";
                                });
                                id = id.substring(0, id.length - 1);
                                win.confirm("确认要删除吗？", function () {
                                    $.post("/admin/sysrole/remove", { id: id }, function (res) {
                                        if (res.Code == 200) {
                                            win.success("删除成功");
                                            getList();
                                        } else {
                                            win.alert(res.Message);
                                        }
                                    });
                                });
                            } else {
                                win.info("请选择要删除的角色");
                            }
                            break;
                    };
                });

                var active = {
                    search: function () {
                        //执行搜索并重载角色
                        tblList.reload({
                            url: "/admin/sysrole/getlist" + getSearchKeys(),
                            page: {
                                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']  //自定义分页布局
                                , curr: 1                                                   //当前页码
                                , groups: 9                                                 //显示页码数
                                , first: false                                              //不显示首页
                                , last: false                                               //不显示尾页
                            }
                        });
                    }
                };
                //搜索按钮
                $('#btnSearch').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

                form.on('checkbox(layTableAllChoose)', function () {
                    var checked = $(this).prop("checked");
                    if (checked) {
                        $('#menu-list').find('input[type=checkbox]').prop("checked", true).siblings(".layui-form-checkbox").addClass("layui-form-checked");
                    } else {
                        $('#menu-list').find('input[type=checkbox]').prop("checked", false).siblings(".layui-form-checkbox").removeClass("layui-form-checked");
                    }
                });
                form.on('checkbox(AllChoose)', function () {
                    var checked = $(this).prop("checked");
                    if (checked) {
                        $(this).parent().parent().find('input[type=checkbox]').prop("checked", true).siblings(".layui-form-checkbox").addClass("layui-form-checked");
                    } else {
                        $(this).parent().parent().find('input[type=checkbox]').prop("checked", false).siblings(".layui-form-checkbox").removeClass("layui-form-checked");
                    }
                    var code = $(this).data('code');

                    var id = parseInt(code / 100);

                    $('#menu-list').find('#cbo_' + id).prop("checked", true).siblings(".layui-form-checkbox").addClass("layui-form-checked");
                });

                form.on('checkbox(AllBtnChoose)', function () {
                    var code = $(this).data('code');

                    var id = parseInt(code / 100);

                    $('#menu-list').find('#cbo_' + code).prop("checked", true).siblings(".layui-form-checkbox").addClass("layui-form-checked");
                    $('#menu-list').find('#cbo_' + id).prop("checked", true).siblings(".layui-form-checkbox").addClass("layui-form-checked");
                });
            });
        });

        //父级展开
        function onOpen(obj, id) {
            if ($(obj).siblings("i").hasClass("layui-icon-right")) {
                $(obj).siblings("i").removeClass("layui-icon-right").addClass("layui-icon-down");
                $("#nodeContent" + id).addClass("layui-show");
            } else {
                $(obj).siblings("i").removeClass("layui-icon-down").addClass("layui-icon-right");
                $("#nodeContent" + id).removeClass("layui-show");
            }
        }
        //保存角色
        function save() {
            if (curRoleId > 0) {
                var menuIds = win.getChecked($("#menu-list input[type='checkbox']:checked"));
                if (menuIds != '') {
                    var arrMenuIds = menuIds.split(',');
                    win.showLoading("正在保存...");
                    $.post("/admin/sysrole/SaveRolePower", { id: curRoleId, menuIds: arrMenuIds }, function (res) {
                        win.hideLoading();
                        if (res.code == 0) {
                            win.success("保存成功");
                        } else {
                            win.alert("保存失败");
                        }
                    });
                }  
            }
        }
        //单击行勾选checkbox事件
        $(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {
            var index = $(this).attr('data-index');
            var tableBox = $(this).parents('.layui-table-box');
            //存在固定列
            if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
                tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
            } else {
                tableDiv = tableBox.find(".layui-table-body.layui-table-main");
            }
            //获取已选中列并取消选中
            var trs = tableDiv.find(".layui-unselect.layui-form-checkbox.layui-form-checked").parent().parent().parent();
            for (var i = 0; i < trs.length; i++) {
                var ind = $(trs[i]).attr("data-index");
                if (ind != index) {
                    var checkCell = tableDiv.find("tr[data-index=" + ind + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
                    if (checkCell.length > 0) {
                        checkCell.click();
                    }
                }
            }
            //选中单击行
            var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
            //if (checkCell.length > 0 & trs.length === 1) {
            //    checkCell.click();
            //}
            checkCell.click();
        });
        $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
            e.stopPropagation();
        });
    </script>
}